Design System v2

Tokens, components, product screens, marketing, email, social, print and merch for Arpezia. Start with the readme, then pick a surface.

Read the guide SKILL.md Brand Central

Foundations

styles.css

Colors, type, spacing, radii, shadows, fonts. One import.

Specimens

guidelines/

Colors: brand Colors: neutrals Colors: accents Colors: levels Accessibility: focus + status Type: headings Type: body Spacing Radii Cards

Brand

assets/logos/

Lockups Marks Origin sketch Header in situ Clean SVGs (16 files)Avant Garde BT (wordmark, read-only documents)

Voice

Voice and tone

The Teacher. Always-true rules, tone by channel, celebration tiers, proof mode, copy patterns, vocabulary, open questions.Guide

Style guide

Punctuation, capitals, numbers, music notation, word list, and the 32-rule checklist for the AI harness.Specimen

Do / don't

Seven key moments, side by side.

Components

vue/arpezia-vue.js

All 29 components as <Apz*>, no build step. Live demo. Vue 3 · 14

Core

Button, IconButton, Input, Select, Checkbox, Radio, Switch, Card, Badge, Tag, Tabs, Dialog, Toast, Tooltip Vue 3 · 7

Library

LevelBadge, AttributePill, ProgressRow, FacetGroup, ContinueCard, GoalTile, SimpleViewToggle Vue 3 · 8

App shell

PageHeader, ShelfHeader, ModeToggle, NotificationPill, SessionBar, MetricCard, Heatmap, DataTable

Product

Interactive kit

Home, Library (Normal + Simple, 3 breakpoints), Practice, Musicians' Room, Coaching, Studio, Recordings, Sign in

Marketing website

ui_kits/website/

Home Pricing Archived options (A1, B2, Paper & Ink)

Communications

Email

templates/email/

Welcome Practice reminder Assignment Receipt

Social

templates/social/

Instagram square Story OG / X card LinkedIn YouTube thumbnail

Slides

templates/slides/

Title Section Content Stats Quote

Print + merch

templates/print/ · merch/

Flyer Poster Business card Tee, stickers, signage